<template>
    <div class="base-info">
        <div class="base-info-head">基本信息</div>
        <div class="form-container">
            <form class="form">
                <ul>
                    <li>
                        <div class="content-show-l">用户昵称</div>
                        <div class="content-show-r">快快乐乐</div>
                        <div class="edit-icon">
                            <i class="iconfont icon-bianji"></i>
                            编辑
                        </div>
                    </li>
                    <li>
                        <div class="content-show-l">
                            <span>用</span>
                            <span>户</span>
                            <span>ID</span>
                        </div>
                        <div class="content-show-r">15639671589</div>
                    </li>
                    <li>
                        <div class="content-show-l">
                            <span>性</span>
                            <span>别</span>
                        </div>
                        <div class="content-show-r">男</div>
                        <div class="edit-icon">
                            <i class="iconfont icon-bianji"></i>
                            编辑
                        </div>
                    </li>
                    <li>
                        <div class="content-show-l">
                            <span>头</span>
                            <span>像</span>
                        </div>
                        <div class="content-show-r">
                            <img src="src/assets/images/Html.png" alt="头像" />
                        </div>
                        <div class="edit-icon">
                            <i class="iconfont icon-bianji"></i>
                            编辑
                        </div>
                    </li>
                    <li>
                        <div class="content-show-l">个人简介</div>
                        <div class="content-show-r no-data">未填写</div>
                        <div class="edit-icon">
                            <i class="iconfont icon-bianji"></i>
                            编辑
                        </div>
                    </li>
                    <li>
                        <div class="content-show-l">出生日期</div>
                        <div class="content-show-r no-data">未设置</div>
                        <div class="edit-icon">
                            <i class="iconfont icon-bianji"></i>
                            编辑
                        </div>
                    </li>
                    <li>
                        <div class="content-show-l">所在地区</div>
                        <div class="content-show-r no-data">未选择</div>
                        <div class="edit-icon">
                            <i class="iconfont icon-bianji"></i>
                            编辑
                        </div>
                    </li>
                </ul>
            </form>
        </div>
    </div>
</template>

<script lang="ts" setup>
</script>

<style lang='scss' scoped>
.base-info {
    width: 1000px;
    background: #fff;
    margin: 10px auto;

    .base-info-head {
        height: 48px;
        line-height: 48px;
        font-size: 18px;
        font-weight: 600;
        color: #2e2e2e;
        padding-left: 16px;
        border-bottom: 1px solid #f0f0f2;
    }

    .form-container {
        padding: 16px 58px 16px 0;
        position: relative;
    }

}

li {
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 32px;
    display: flex;

    .content-show-l {
        width: 56px;
        color: #555666;
        margin-right: 40px;
        padding-left: 16px;
        box-sizing: content-box;
        display: flex;
        justify-content: space-between;
    }

    .no-data {
        color: #999aaa;
    }

    .edit-icon {
        margin-left: 24px;
        cursor: pointer;
        color: #1989fa;
        font-size: 14px;
        min-width: 50px;
        -webkit-box-align: baseline;

        .icon-bianji {
            font-size: 14px;
        }
    }
}
</style>